<template>
  <div class="container">
    <el-card class="content">
      <h1>请先登录</h1>
      <h5>PIMS4CDAPP</h5>
      <el-form>
        <el-form-item>
          <el-input type="tel" placeholder="工牌号" v-model="number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="password"
            placeholder="密码"
            v-model="passwd"
          ></el-input>
        </el-form-item>
        <el-alert
          v-show="isFailed"
          title="失败了QAQ~ 请检查工牌号或密码，密码与OPREC相同。"
          type="error"
          :closable="false"
          style="padding: 5px; margin-bottom: 12px"
        >
        </el-alert>
        <el-button type="primary" @click="login">验证</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "loginView",
  data() {
    return {
      number: null,
      passwd: "",
    };
  },
  computed: {
    isLogged() {
      return this.$store.getters.isLogged;
    },
    isLoading() {
      return this.$store.state.isLoading;
    },
    isFailed() {
      return this.$store.getters.isFailed;
    },
  },
  methods: {
    login() {
      let payload = {
        number: this.number,
        passwd: this.passwd,
      };
      if (this.isDev) window.console.log(payload);
      this.$store.dispatch("login", payload);
    },
  },
  watch: {
    isLogged(val) {
      if (val) {
        this.$router.push("/").catch((err) => {
          if (this.isDev) window.console.log(err);
        });
      }
    },
  },
  mounted() {
    if (this.$store.getters.isLogged) {
      this.$router.push("/").catch((err) => {
        if (this.isDev) window.console.log(err);
      });
    }
  },
};
</script>

<style scoped>
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  width: 400px;
  max-width: 80vw;
  margin-bottom: 25vh;
}
</style>